<template>
    <div class="card-container" :style="{ background: bgColor }">
        <div class="flex_between">
            <div class="flex1 flex_row ellipsis">
                <div :style="{ height: imgH + 'px', width: imgW + 'px' }">
                    <el-image :style="{ height: imgH + 'px', width: imgW + 'px', borderRadius: '6px' }"
                        :src="goods.gdimg" fit="cover"></el-image>
                </div>
                <div class="ml10 flex1" style="max-width: 100%;">
                    <div class="font_size14 ellipsis" style="max-width: 85%;" :title="goods.gdname">{{ goods.gdname ||
                        '--' }}</div>
                    <slot name="goods_no"></slot>
                    <div class="font_black9 ellipsis" style="max-width: 85%;" :title="goods.brand">{{ goods.brand ||
                        '--' }}</div>
                    <slot name="category_name"></slot>
                </div>
            </div>
            <div v-if="rightArea" class="ml10 ellipsis" :style="{ textAlign: 'right', maxWidth: rightMaxW + 'px', overflow: 'hidden' }">
                <div class="font_black9 ellipsis" :title="goods.gd_brand">{{ goods.gd_brand || '--' }}</div>
                <div class="font_black9 ellipsis" :title="goods.unit_info">{{ goods.unit_info || '--' }}</div>
            </div>
            <slot v-if="!rightArea" name="right_area"></slot>
        </div>
    </div>
</template>

<script setup>
import { watch, computed, defineProps, defineEmits } from '@vue/composition-api';

const props = defineProps({
    // goods 渲染字段
    // {
    //     "gdid": 1431,
    //     "gdname": "大楼",
    //     "gdimg": "https://cdn-test.imiyun.com/d/cp0/goods/a32a7a1138b98184f36ed82fbe104a10.jpeg?x-oss-process=image/resize,m_lfit,w_480",
    //     "gdtitle": "手表,小米",
    //     "brand": "华为,中国风",
    //     "gd_brand": "华为,中国风|手表,小米|220805101436",
    //     "item_no": "220805101436",
    //     "unit_info": "1/笔|大笔|A型 X 1支"
    // }
    goods: {
        type: Object,
        default: () => ({})
    },
    // 照片宽高
    imgW: {
        type: [String, Number],
        default: 50
    },
    imgH: {
        type: [String, Number],
        default: 50
    },
    // 卡片背景颜色
    bgColor: {
        type: String,
        default: '#f7fafa'
    },
    rightMaxW: {
        type: [String, Number],
        default: 300
    },
    // 是否显示右侧区域
    rightArea: {
        type: Boolean,
        default: true
    }
});

const emit = defineEmits(['load-more']);

</script>

<style lang="scss" scoped>
.card-container {
    padding: 10px;
    border-radius: 6px;
    overflow-y: auto;
    box-sizing: border-box;
    margin-bottom: 8px;
}
</style>